import React, { useState } from 'react';
import NoUiSlider from '../../components/NoUiSlider';
import '../common.css';
import './styles.css';

const SkipStepSlider = () => {
  const [values, setValues] = useState([20, 90]);

  const handleChange = (values) => {
    setValues(values.map(Number));
  };

  return (
    <div className="skip-step-slider-container">
      <h2>Skip Steps Example</h2>
      <div className="slider-wrapper">
        <div className="slider-container">
          <NoUiSlider
            start={values}
            connect={true}
            range={{
              'min': 0,
              '10%': 10,
              '20%': 20,
              '30%': 30,
              // 跳过 40
              '50%': 50,
              '60%': 60,
              '70%': 70,
              // 跳过 80
              '90%': 90,
              'max': 100
            }}
            snap={true}
            tooltips={[true, true]}
            onChange={handleChange}
          />
        </div>
        <div className="value-display">
          <div>最小值: {values[0]}</div>
          <div>最大值: {values[1]}</div>
        </div>
      </div>
      <div className="description">
        <p>这个示例展示了如何跳过某些值：</p>
        <ul>
          <li>滑块会自动跳过 40 和 80 这两个值</li>
          <li>使用 snap 功能确保滑块停在有效值上</li>
          <li>范围分布：
            <ul>
              <li>0-10: 步进值为 10</li>
              <li>10-30: 步进值为 10</li>
              <li>30-50: 步进值为 20</li>
              <li>50-70: 步进值为 10</li>
              <li>70-90: 步进值为 20</li>
              <li>90-100: 步进值为 10</li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default SkipStepSlider; 